<template>
    <div v-loading="loading" style="width: 800px;height: 100vh;margin: auto">
    <el-upload
            class="upload-demo"
            drag
            action='http://124.71.182.39:28000/upload/uploadVideo'
            name="file"
            accept="video/*"
            :headers="headers"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :on-progress="handleProgress"
    >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text" style="height: 200px">
            Drop file here or <em>click to upload</em>
        </div>
        <template #tip>
            <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
            </div>
        </template>
    </el-upload>
    </div>
</template>

<script setup>
import { UploadFilled } from '@element-plus/icons-vue'
import {ref} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";

const loginInfo = ref(getUser());
const uploadPercentage = ref(0);

const loading = ref(false);

const headers = {
    'Authorization': loginInfo.value.token
};


const beforeUpload = () => {
    loading.value = true;
}

const handleProgress = (event) => {
    loading.value = true;
    uploadPercentage.value = event.percent;
}

const handleSuccess=(response)=>{
    const returnUrl = response.data;
    localStorage.setItem('returnUrl', returnUrl);
    // console.log(returnUrl)
    ElMessage.success('上传成功')
    router.push('/release')
}
</script>

<style scoped>
body {
    margin: 0;
}
.example-showcase .el-loading-mask {
    z-index: 9;
}
</style>